<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css">
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <!-- <table id="dg"></table> -->
    <!-- 1 -->
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>


            <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed:true" style="width:600px;height:400px;padding:10px">
                <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">

                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="_id" style="width:100%">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" id="cateId" name="cateId" style="width:100%" data-options="label:'cateId：',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="type" style="width:100%" data-options="label:'商品类型：',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'产品名称：',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="price" style="width:100%" data-options="label:'产品价格',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="color" style="width:100%" data-options="label:'产品颜色',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="size" style="width:100%" data-options="label:'产品尺寸',required:true">
                    </div>
                    <div style="margin-bottom:20px">

                        生产日期: <input class="easyui-datetimebox" name='date' value="请选择时间" style="width:410px">
                    </div>
                    <div style="margin-bottom:20px">

                        产品安全： <select class="easyui-combobox" name="safety" style="width:410px;">
                            <option>安全</option>
                            <option>不安全</option>
                        </select>
                    </div>
                    <div style="margin-bottom:20px">

                        用户体验： <select class="easyui-combobox" name="UE" style="width:410px;">
                            <option>良好</option>
                            <option>差评</option>
                        </select>
                    </div>
                    <div style="margin-bottom:20px">

                        操作难度： <select class="easyui-combobox" name="operative" style="width:410px;">
                            <option>简单</option>
                            <option>困难</option>
                        </select>
                    </div>
                    <div style="margin-bottom:20px">产品质量
                        <select class="easyui-combobox" name="quality" style="width:410px;">
                        <option>true</option>
		                <option>false</option>
                    </select>
                    </div>

                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    var nodedata = {};
    $('#tt').tree({
        url: `http://10.31.161.18:3000/cate/list/2`,
        method: 'post',
        animate: true,
        onClick: function(node) {
            $(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
            node.state = node.state === 'closed' ? 'open' : 'closed';

            console.log(node)

            var title = node.text;
            nodedata.cateId = node._id;
            nodedata.text = node.text;

            $('#dg').datagrid({
                url: 'http://localhost:3000/product/list',
                fit: true,
                pagination: true,
                type: node.text,
                queryParams: {
                    cateId: node._id,
                    text: node.text
                },
                toolbar: [{
                    text: '添加数据',
                    iconCls: 'icon-add',
                    handler: function() {
                        $('#dlg').dialog('open');
                        $('#cateId').textbox('setValue', nodedata.cateId);
                    }
                }, '-', {
                    text: '删除数据',
                    iconCls: 'icon-cut',
                    handler: function() {
                        deleteData();
                    }
                }],
                columns: [

                    [{
                        field: 'ck',
                        checkbox: true
                    }, {
                        field: 'type',
                        title: '商品类型',
                        width: 100
                    }, {
                        field: 'name',
                        title: '名称',
                        width: 100
                    }, {
                        field: 'price',
                        title: '价格',
                        width: 100
                    }, {
                        field: 'color',
                        title: '颜色',
                        width: 100
                    }, {
                        field: 'size',
                        title: '尺寸',
                        width: 100
                    }, {
                        field: 'date',
                        title: '日期',
                        width: 100
                    }, {
                        field: 'safety',
                        title: '安全',
                        width: 100
                    }, {
                        field: 'UE',
                        title: '用户体验',
                        width: 100
                    }, {
                        field: 'operative',
                        title: '操作难度',
                        width: 100
                    }, {
                        field: 'quality',
                        title: '质量',
                        width: 100
                    }, {
                        field: '_id',
                        title: '操作',
                        width: 80,
                        formatter: function(value, row, index) {
                            return `<a href='#' onclick="editData('${row._id}')">修改</a> <a href='#' onclick="deleteData('${row._id}')">删除</a>`
                        }
                    }]
                ],
                onClickRow: function(index, row) {
                    console.log(index, row);
                }
            });
        }
    });

    function deleteData() {
        $.messager.confirm('确认框', '你确定删除该数据？', function(r) {
            if (r) {
                var dgSelections = $('#dg').datagrid('getSelections');
                var ids = [];
                for (var i = 0; i < dgSelections.length; i++) {
                    ids.push(dgSelections[i]._id);
                }
                $.ajax({
                    url: `http://localhost:3000/product/${ids}`,
                    type: 'delete'
                }).done(function(res) {
                    $('#dg').datagrid('reload');
                })
            }
        });

    }

    function editData(id) {

        $.ajax({
            type: 'get',
            url: `http://localhost:3000/product/${id}`
        }).done(function(res) {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })
    }

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {

                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $('#ff').serializeJSON();
                    if ($('#ff').serializeJSON()._id) {
                        $.ajax({
                            url: `http://localhost:3000/product/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })
                    } else {
                        //新增的时候不得有下划线id
                        delete formData._id;
                        $.ajax({
                            url: 'http://localhost:3000/product',
                            type: 'post',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })
                    }

                }
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }
</script>